<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SmartMad Monitor</title>
<link rel="stylesheet" href="../assets/css/bootstrap-spacelab.css" />
<link rel="stylesheet" href="../assets/css/base.css?t=20130516173114" />

  <!-- template
    ================================================== -->
<script id="t_a" type="text/html">
	<table class="table table-striped table-bordered table-condensed">
		<thead>
			<tr><th>站点</th><th width="40%">平均耗时(每下载10KB)</th><th>最快速度</th><th>最慢速度</th></tr>
		</thead>
		<tbody>			
    <% for (var i in list) {
	 		var item = list[i]; 
	 		var s = item.average_time*1;
	 		var cl = '';
			if(s < 0.5){
				cl = 's_a';
			}else if(s > 0.5 && s < 1){
				cl = 's_b';
			}else if(s > 1 && s < 1.5){
				cl = 's_c';
			}else if(s > 1.5 && s < 2){
				cl = 's_d';
			}else if(s > 2){
				cl = 's_e';
			}
	%>
		<tr>
			<td><a href="javascript:void(0);" class="viewSite" ><%= i %></a></td>
			<td><span class="<%= cl %>" data-s="<%= s %>"><%= s %> s</span></td>
			<td><%= item.hspeed %> <strong>kbp/s</strong></td>
			<td><%= item.lspeed %> <strong>kbp/s</strong></td>
		</tr>
    <% } %>
	</tbody>
	</table>
</script>

<style type="text/css">
#date{font-weight:bold;}
#speedList strong{ padding-left:3px;font-size:8px;}
speedList a.viewSite{display:block;}
</style>
</head>
<body>
    <header>
        <h1>平均访问速度</h1>
        <div id="toolbar">
        		<div class="btn-group box_3" id="dateQuery">
            		<button class="btn active" data-time="0">今天</button>
            		<button class="btn" data-time="1">昨天</button>
           		 	<button class="btn" data-time="7">最近7天</button>
            		<button class="btn" data-time="15">最近15天</button>
            		<button class="btn" data-time="30">最近30天</button>
        		</div>
                <div class="btn-group box_1">
                    <button class="btn" id="refresh">
                        <i class="icon-refresh"></i> 刷新
                    </button>
                    <button class="btn" id="set">
                      <i class="icon-cog"></i>  设置
                    </button>
                    <button class="btn" id="info">
                        <i class="icon-info-sign"></i> 信息
                    </button>					
                </div>
        </div> 
    </header>

    <div id="mainbody">
        <div class="row">
            <div class="span4">
                <label id="date">
                </label>
            </div>
            <div class="span8" id="speedDes">
                <cite style="background:#28ab17;">
                </cite>
                <span>非常快(<0.5s)</span>
                <cite style="background:#ff9900;">
                </cite>
                <span>较快(0.5s~1s)</span>
                <cite style="background:#ffcc00;">
                </cite>
                <span>一般(1~1.5s)</span>
                <cite style="background:#660000;">
                </cite>
                <span>较慢(1.5s~2s)</span>
                <cite style="background:#ff0000;">
                </cite>
                <span>非常慢(>2s)</span>
            </div>
        </div>
		
		<br />	
	
        <div id="speedList">
        </div>
    </div>

  <!-- js part
    ================================================== -->
<script src="../assets/js/library/jquery-1.7.1.js"></script>
<script src="../assets/js/library/bootstrap.min.js"></script>
<script src="../assets/js/library/template.js"></script>
<script src="../assets/js/helper.js?t=20130516173114"></script>
<script src="../assets/js/doc.js?t=20130516173114"></script>	
<script>
$(function(){
	var smartMad = window.smartMad = window.smartMad || {};
	var domain = domainURI();
    var version = urlParams('version');
    
    var _url = "http://" + domain + "/mmsapi" + version;
	
	var $speedList = $('#speedList');
    
	//日期格式化
    Date.prototype.format = function(f){
		var y = this.getFullYear(),
			m = this.getMonth()+1 ,
			d = this.getDate();
		
		if(f){
			return y + '-' + (m > 9 ? m.toString(10) : '0' + m) +  '-' +  (d > 9 ? d.toString(10) : '0' + d);
		}
		return y + (m > 9 ? m.toString(10) : '0' + m) + (d > 9 ? d.toString(10) : '0' + d);
    };
	
		
	//页面初始化
    ////////////////////////////////////////////////////
	$('#dateQuery').delegate('button','click',function(){
		var conf = {type:'post'};
		var $th = $(this).addClass('active');
		var da,da1,dz1, dz = new Date - 0, dc = $th.attr('data-time')*1;
		$th.siblings().removeClass('active');
		
		da = new Date(dz - dc*24*60*60*1000);
		dz = new Date(dz);
		da1 = da.format(1);
		dz1 = dz.format(1);
		da = da.format();
		dz = dz.format();
		
		$('#date').text(da1 + ' ～  ' + (dc <= 1 ? da1 : dz1));
		
		conf.url = _url + '/get/speed/@all';
		conf.data = {start:da};
		dc == 0 ? 0 : (conf.data.end = dz);
		dc == 1 ? (conf.data.end = da) : 0;
		
		$speedList.getData(conf);
		
	});
    
    $speedList.bind('ajax.success', function(e, json){
    
        var $th = $(this), data, html;
        
        //$th.html(JSON.stringify(json));return;
        ///////////////////////////////////////////////
        
        data = {list:json};
        
        html = template('t_a', data);
        $th.html(html);
		
		///////////////////////////////////////////
		
		//查看站点
		$th.delegate('a.viewSite','click',function(){
			location.href = "viewReport.html?version=" + version +'&id=' + $(this).text();
		});
		
		//速度动画
		$th.find('td span[class^="s"]').each(function(i){
			var $th = $(this);
			var ww = $th.parent().width()- 20;
			var w = Math.min($th.width() + $th.attr('data-s') * 100,ww) + 'px';
			$th.animate({
				'width': w
			},800);
		
		});
        
    });
    
	//////////////////////////////////////////////
    //请求数据
	$('#dateQuery button.active').click();
    
});

	
</script>
</body>
</html>
